<template>
    <div class="type-editor">
        <div v-if="isShowTable">
            <el-table
                :data="tableData"
                class="return-table"
                height="calc(50vh - 40px)"
                border
                style="border-color: #2c2d2e; width: 100%; overflow: auto"
                :header-cell-style="{
                    color: '#fff',
                    background: '#353638',
                    borderColor: '#2c2d2e',
                }"
                :cell-style="{
                    color: '#fff',
                    background: '#242527',
                    borderColor: '#2c2d2e',
                }"
            >
                <el-table-column type="index"></el-table-column>
                <el-table-column
                    v-for="(item, index) in tableHeaders"
                    :key="index"
                    :prop="item"
                    :label="item"
                    :width="columnWidth(item, tableData)"
                ></el-table-column>
            </el-table>
        </div>
        <div v-if="isExecResult">{{ execResult }}</div>
    </div>
</template>

<script>
export default {
    name: "out-put",
    props: {
        tableData: Array,
        execResult: String,
        tableHeaders: Array,
        isShowTable: Boolean,
        isExecResult: Boolean,
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {
        // col 里面包含了表头字段和名称，list 是表格数据
        columnWidth(col, list) {
            let width = 90; // 设定一个最小值
            let maxlenStr = ""; // 最长字符串
            for (let info of list) {
                if (info[col] && maxlenStr.length < (info[col] + "").length)
                    maxlenStr = info[col];
            }
            width = Math.max(width, this.len(col), this.len(maxlenStr));
            let maxWidth =
                window.document.documentElement.clientWidth * 0.5 - 30;
            width = width > maxWidth ? maxWidth : width + 22;
            // 表格自带的内边距(20px) 自调
            return width;
        },
        len(str) {
            // 实际分配长度可根据需要自行调整
            let length = 0;
            for (const char of str + "") {
                // 英文小写字符 8px
                if ("a" <= char && char <= "z") length += 8;
                // 英文大写字符 12px
                else if ("A" <= char && char <= "Z") length += 12;
                // 中文字符 16px
                else if (char >= "\u4e00" && char <= "\u9fa5") length += 16;
                // 其他 8px
                else length += 8;
            }
            return length;
        },
    },
};
</script>

<style scoped>
.type-editor {
    color: #fff;
    padding: 20px;
}

.return-table {
    width: 100%;
}
</style>
<style>
.el-table__empty-block {
    background: #242527;
}

.el-table__empty-text {
    color: #fff !important;
}
.el-table__body-wrapper {
    background-color: #242527;
}
.el-table__header-wrapper {
    background: #242527;
}
.el-table--border th.el-table__cell.gutter:last-of-type {
    background-color: #242527;
    border-bottom: none !important;
}
</style>
